@import "@/assets/scss/tools.scss";
.invitation {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(#FFFFFF 0%, #FEFCE4 100%);
  &-main {
    flex: 1;
    padding-top: 60px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .single-swiper {
      margin-bottom: 120px;
    }
    .swiper-wrap {
      flex: 1;
      width: 100%;  
      .image-wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        // width: 58vw;
        // height: 58vh;
        min-height: 680px;
        border-radius: 16px;  
        z-index: 1;
        overflow: unset;
        text-align: center;
        box-sizing: border-box; 
        padding: 0 20px;
        .group-poster {
          width: 400px;
          height: 710px;
          transition: all .2s ease-in 0s;
          image {
            width: 100%;
            height: 100%; 
          }
        }
        &.active {
          padding: 36px 20px;
          .group-poster {
            width: 440px;
            height: 782px;
            image {  
              width: 440px; 
              height: 782px;
              transition: all .2s ease-in 0s; 
            }
          }
        }
      }    
    } 
    .indicator-dots {
      padding-top: 48px;
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      margin-bottom: 16px;
      &-item {
        width: 24px;
        height: 24px;
        margin-right: 4px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    &-default_img {
      width: 440px;
      height: 80%;
      margin: 0 auto;
    }
  }
  view.loading-class {
    visibility: hidden;
  }
  .default-loading {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    width: 58vw;
    height: 60vh;
    background-size: 100% 100%;
  }
  &-bottom {
    text-align: center;
    >image {
      width: 532px;
      height: 138px;
      margin: 0 auto;
      margin-bottom: 110px;
      animation: dynamic 1s infinite;
    }
  } 
}